<template>
	<div>
		<Swiper 
			dots-position="center"
			loop
			height="20rem"
		>
			<SwiperItem v-for="(arr,i) in itemArr" :key="i">
				<div 
					class="page-item"
					v-for="item in arr"
				>
					<img :src="item.image_hash|imgFil" />
					<p>{{item.name}}</p>
				</div>
			</SwiperItem>
		
		</Swiper>
	</div>
</template>

<script>
	
	import {Swiper,SwiperItem} from "vux";
	import {imgFil} from "../util/filters.js";
	
	export default {
		props:["swi"],
		filters:{
			imgFil
		},
		components:{
			Swiper,
			SwiperItem
		},
		computed:{
			itemArr:function(){
				var arr = [];
				var temp = [];
				for (var i = 0;i<this.swi.length;i++) {
					temp.push(this.swi[i]);
					if((i+1)%8==0||i==this.swi.length-1){
						arr.push(temp);
						temp = [];
					}
				}
				return arr;
			}
		}
	}
</script>

<style scoped>
	.page-item{
		display: inline-block;
		width: 25%;
		height: 10rem;
		text-align: center;
	}
	
	.page-item img{
		height: 8rem;
		width: 100%;
		padding: 10px;
	}
	
</style>